<template>
  <div class="dataManage">
    <nav-bar class="home-nav">
      <div slot="center">查询</div>
    </nav-bar>
    <div v-if="!isNoData">
      <div class="search">
        <div class="search_select">
          <van-field
            readonly
            clickable
            right-icon="arrow-down"
            name="picker"
            :value="value"
            label=""
            placeholder=""
            @click="showPicker = true"
          />
        </div>
        <div class="search_input">
          <van-search
            v-model="name"
            shape="round"
            background="#ffffff"
            placeholder="请输入搜索关键词"
            @search="onSearch"
          />
        </div>

        <van-popup v-model="showPicker" position="right" :style="{ width: '80%',height:'100%' }">
          <div class="select_box">
            <div class="select_item">
              <h2>基地</h2>
              <div class="select_name_box"><span :class="{'selected':cur_index===''}" @click="onSelectAll">全部</span>
                <span v-for="(item,index) in baseArr" @click="onChangeBase(item,index)"
                      :class="{'selected':cur_index===index}">{{item.name}}</span>
              </div>
            </div>
            <div class="select_item">
              <h2>产品</h2>
              <div class="select_name_box">
               <span
                 v-for="(item,index) in productList"
                 @click="onChangeProd(item,index)"
                 :class="{'selected':cur_prod_index===index}"
               >
                 {{item.name}}
               </span>

              </div>
            </div>
          </div>
          <div class="confirm" @click="onConfirm">确认</div>
        </van-popup>

      </div>
      <div class="item_wrapper">
        <div class="item_box" v-for="item in batch">
          <div class="flex_between border-bottom pd10">
            <span class="num">批次编号：{{item.uuid}}</span>
            <span class="num_date">{{item.create_date}}</span>
          </div>
          <div class="border-bottom flex_between fz14 pd10">
            <span class="">种植基地：<span class="color_main">{{item.base_name}}</span></span>
          </div>
          <div class="border-bottom flex_between fz14 pd10">
            <span class="">批次名称：<span class="color_main">{{item.name}}</span></span>
          </div>
          <div class="border-bottom flex_between fz14 pd10">
            <span>开始时间：<span class="color_main">{{item.start_time}}</span></span>
            <span>结束时间：<span class="color_main">{{item.end_time}}</span></span>
          </div>
          <div class="lk_detail">
            <div slot="btns" class="btns">
              <div class="out" @click="onOut(item)">出库</div>
              <div class="in" @click="onIn(item)">入库</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-else>
      <no-data></no-data>
    </div>
    <tab-bar :active=3></tab-bar>
  </div>
</template>

<script>
  import NavBar from "@/components/common/navbar/NavBar";
  import tabBar from '@/components/content/tabBar';
  import ItemView from "@/components/content/ItemView";
  import noData from "@/components/content/nodata";

  export default {
    name: "index",
    components: {
      NavBar,
      tabBar,
      ItemView,
      noData
    },
    data() {
      return {
        isNoData: false,
        cur_index: '',
        cur_prod_index: '',
        base_id: 0,
        pid: 0,
        value: '筛选',
        showPicker: false,
        name: '',
        batch: [],
        baseArr: [],
        productList: [],
      }
    },

    created() {
      this.getBatch();
      this.getBaseList()
    },

    methods: {
      getBaseList() {
        let that = this;
        that.$http.get('/api/MobileAadminApi/getBase', null, r => {
          console.log('基地r', r)
          that.baseArr = r.data;
        })
      },

      onChangeBase(e, index) {
        console.log('index', index)
        console.log(e)
        this.cur_index = index;
        this.cur_prod_index = '';
        this.pid = 0;
        this.base_id = e.id;
        console.log('cur_index', this.cur_index)
        console.log('base_id', this.base_id)
        console.log('pid', this.pid)
        this.getProList();
      },

      onSelectAll() {
        this.cur_index = '';
        this.base_id = 0;
        this.pid = 0;
        console.log('基地', this.base_id)
        this.getProList();
      },

      getProList() {
        let that = this;
        console.log('基地', that.base_id)
        that.$http.get('/api/MobileAadminApi/getProductList', {'base_id': that.base_id}, r => {
          console.log('产品', r)
          that.productList = r.data;
        })
      },

      onChangeProd(e, index) {
        console.log('产品index', index)
        console.log(e);
        this.cur_prod_index = index;
        this.pid = e.id;
        console.log('pid', this.pid)
        // this.value = e.name;
      },

      onSearch(val) {
        console.log('点击搜索', val);
        this.getBatch();
      },

      onConfirm() {
        this.getBatch();
        this.showPicker = false;
      },

      getBatch() {
        let that = this;
        console.log('base_id', this.base_id)
        console.log('pid', this.pid)
        that.$http.get('/api/MobileAadminApi/getBatchtList', {
          base_id: that.base_id,
          pid: that.pid,
          name: that.name
        }, r => {
          console.log('批次结果', r);
          that.batch = r.data;
          if (that.batch.length == 0) {
            that.isNoData = true
          }
        })
      },

      onOut(e) {
        console.log(e)
        this.$router.push({path: '/in', query: {bid: e.id, type: 1}})
      },

      onIn(e) {
        console.log(e)
        this.$router.push({path: '/in', query: {bid: e.id, type: 2}})
      }

    }
  }
</script>

<style scoped>
  .search_input >>> .van-cell, .search_select >>> .van-cell {
    font-size: .28rem;
    padding: .1rem;
  }

  .item_wrapper {
    padding-bottom: 1.5rem;
    /*height: 100vh;*/
  }

  .btns {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .out, .in {
    flex: 1;
    padding: 10px 0;
  }

  .out {
    color: var(--color-tint);
    border-right: 1px solid #eee;
  }

  .in {
    color: #ff3b30;
  }
</style>
